<template>
    <div class="more_body_">
        <div class="more_centered">
            <div class="myheader_">
                <div class="_back"><a href="#/user" style="text-decoration: none;">&lt;</a></div>
                <div class="mine_">
                    <span>记录</span>
                </div>
            </div>
            <div class="product-list">
                <div v-if="HistoryData.length > 0">
                    <div class="product-item" v-for="(item) in HistoryData" :key="item.productId"
                        @click="goToProductDetail(item.productId)">
                        <img :src="item.product.image" alt="product image" class="product-image" />
                        <div class="product-info">
                            <h3 class="product-name">{{ item.product.name }}</h3>
                            <p class="product-price">￥{{ item.product.price }}</p>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <p>暂无数据</p>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import { jwtDecode } from 'jwt-decode';
export default {
    data() {
        return {
            HistoryData: [
                // 这里是你的浏览数据
            ],
        };
    },
    methods: {
        //跳转产品详情页面
        goToProductDetail(productId) {
            this.$router.push({ name: 'ProductDetail', params: { id: productId } });
        },
    },
    mounted() {
        const jwt = localStorage.getItem('jwt');
        if (jwt) {
            const decoded = jwtDecode(jwt);
            const userId = decoded.id; // 确保你的token结构中有id字段
            this.$http.get("/api/students/queryBehavior/" + userId).then(response => {  /*刷新页面*/
                this.HistoryData = response.data.data.rows;

            }).catch(() => {
                this.$message.error("请求错误");
            });
        }
    },
};
</script>
  
<style>
@import "@/style/learing.css";
</style>